<template>
	<div>
		<DataSourceConfigPage ref="dataSourceConfigPage" :scope="scope"></DataSourceConfigPage>
		<SummaryReportConfigPage ref="summaryReportConfigPage" :scope="scope"></SummaryReportConfigPage>
		<SummaryReportPreviewPage ref="summaryReportPreviewPage" :scope="scope"></SummaryReportPreviewPage>
		<div
			style="display: flex;justify-content: space-between;margin-top: 10px;border-top: 1px solid #ddd;padding-top: 10px;">
			<div>
				<el-button type="primary" @click="onPreviousClickHandler" size="small" v-show="currentPageIndex>0">上一步
				</el-button>
			</div>
			<div>
				<el-button type="primary" @click="onNextClickHandler" size="small" v-if="!showFinishButton">下一步
				</el-button>
				<el-button type="primary" @click="onFinishClickHandler" size="small" v-if="showFinishButton">完成
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import DataSourceConfigPage from './DataSourceConfigPage.vue';
	import SummaryReportConfigPage from './SummaryReportConfigPage.vue';
	import SummaryReportPreviewPage from './SummaryReportPreviewPage.vue';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "SummaryReportDesigner",
		components: {
			DataSourceConfigPage,SummaryReportConfigPage,SummaryReportPreviewPage
		},
		props: ["paraMap"],
		data() {
			return {
				code: "",
				currentPageIndex: 0,
				pageList: [],
				scope: {},
				showFinishButton: false,
			}
		},
		mounted() {
			this.code = this.paraMap["code"];
			this.scope["code"]=this.code;
			this.init();
		},
		methods: {
			init() {
				this.$nextTick(function() {
					this.pageList = ["dataSourceConfigPage","summaryReportConfigPage","summaryReportPreviewPage"];
					for (var i = 0; i < this.pageList.length; i++) {
						this.scope[this.pageList[i]] = {};
					}
					this.currentPageIndex = 0;
					this.refreshVisual();
				});
			},
			refreshVisual() {
				for (var i = 0; i < this.pageList.length; i++) {
					if (i == this.currentPageIndex) {
						this.$refs[this.pageList[i]].setVisible(true);
					} else {
						this.$refs[this.pageList[i]].setVisible(false);
					}
					var currentPage = this.$refs[this.pageList[this.currentPageIndex]];
					if (currentPage.isCompletedPage()) {
						this.showFinishButton = true;
					} else {
						this.showFinishButton = false;
					}
				}
			},
			setVisible(visible) {
				this.dialogVisible = visible;
			},
			onNextClickHandler() {
				var currentPage = this.$refs[this.pageList[this.currentPageIndex]];
				this.scope[this.pageList[this.currentPageIndex]] = currentPage.getReturnData();
				var nextPageName = currentPage.getNextPage();
				for (var i = 0; i < this.pageList.length; i++) {
					if (this.pageList[i] == nextPageName) {
						this.currentPageIndex = i;
						break;
					}
				}
				this.refreshVisual();
			},
			onPreviousClickHandler() {
				var currentPage = this.$refs[this.pageList[this.currentPageIndex]];
				this.scope[this.pageList[this.currentPageIndex]] = currentPage.getReturnData();
				var previousPageName = currentPage.getPreviousPage();
				for (var i = 0; i < this.pageList.length; i++) {
					if (this.pageList[i] == previousPageName) {
						this.currentPageIndex = i;
						break;
					}
				}
				this.refreshVisual();
			},
			onFinishClickHandler() {
				var currentPage = this.$refs[this.pageList[this.currentPageIndex]];
				this.scope[this.pageList[this.currentPageIndex]] = currentPage.getReturnData();
				var data = {
					"json": JSON.stringify(this.scope),
					"code":this.code
				};
				var that = this;
				restUtil.postAction(this,"summaryreportdesigner/onFinish", data).then(
					function(response) {
						if (response.data.code == 1) {
							that.$store.state.webIDE.$refs.mainPageContainer.loadPage({
								"name": "结果页",
								"menuType": "clientpage",
								"pageCode": "result-page"
							}, {
							
							});
							that.dialogVisible = false;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			}
		},
	}
</script>

<style>
</style>